<template lang="pug">
.ignore-entry-body
  data-page(
    v-bind="pageParams"
    v-if="props.selectItem && props.selectItem.level == 2"
  )
    mt-table(
      v-bind="tableProps"
    )
    edit-form(
      v-bind="editFormProps"
    )
    edit(v-model="editingModel",:selectItem="editingItem",@handleQuery="handleQuery")
  no-data(v-else)
</template>

<script setup lang="ts">
import {
  type FormItemProps,
  type DataPageProps,
  type Action,
  type IAction,
  type EditFormProps,
  type TableProps,
  useNotify,
} from "@scmt/common-components";
import { useRequest } from "@scmt/common-hooks";
import { type QueryPagination, useApi } from "@scmt/core-api";
import type { EntryEntity } from "@scmt/api-pacs-entry";
import type {
  EntryTypeQueryParams,
  EntryTypeEntity,
} from "@scmt/api-pacs-entry-type";
import edit from "../entry-type/components/edit.vue";

const $api = useApi();
const $notify = useNotify();

const editingObj = ref<null | EntryEntity>(null);
const editingModel = ref(false);
const editingItem = ref<EntryTypeEntity>();
//添加 Props属性
const props = defineProps({
  selectItem: Object,
});
const queryPramas = reactive<EntryTypeQueryParams>({
  name: "",
  pageNum: 1,
  pageSize: 20,
});
const { request, data, loadingMap } = useRequest({
  entry: (typeId: string) => {
    return $api.pacs.entry.getEntryByTypeId(typeId);
  },
  tableData: (q: any) => {
    const params = Object.assign(
      { parentId: props.selectItem ? props.selectItem.id : "id" },
      queryPramas,
      q
    );
    return $api.pacs.entryType.query(params);
  },
  save: (model: EntryEntity) => {
    return $api.pacs.entry.save(model).then(() => {
      $notify.success("保存成功");
    });
  },
  destroy: (ids: string) => {
    return $api.pacs.entryType.destroy(ids).then(() => {
      $notify.success("删除成功");

      request("tableData", {
        pageSize: 20,
      });
    });
  },
});
const handleQuery = () => {
  request("tableData");
};

const pageParams = computed<DataPageProps>(() => {
  const queryFields: FormItemProps[] = [
    {
      prop: "name",
      label: "术语名称",
    },
  ];

  const headerActions: Action[] = [];

  const dataPageProps: DataPageProps = {
    loading: loadingMap.tableData,
    queryModel: queryPramas,
    queryFields,
    actions: headerActions,
    onQuery: () => request("tableData"),
    onAct: onPageActions,
  };

  return dataPageProps;
});
const tableProps = computed(() => {
  const { tableData } = toRefs(data);

  const tableProps: TableProps = {
    loading: loadingMap.tableData,
    data: tableData.value?.items,
    pagination: tableData.value?.pagination,
    columns: [
      {
        type: "index",
        label: "序号",
        width: "60px",
      },
      {
        prop: "name",
        label: "术语名称",
      },
      {
        prop: "name",
        label: "类型",
        render: ({ row }) => {
          let itemText = "-";
          if (row.name && props.selectItem) {
            itemText = props.selectItem.name;
          }

          return h("div", itemText);
        },
      },
      {
        prop: "createTime",
        label: "创建时间",
        format: "datetime",
      },
      {
        label: "操作",
        actions: ["edit", "destroy", { label: "详情", event: "entry" }],
      },
    ],
    onAct: onPageActions,
    onPaginate: (pagination: QueryPagination) =>
      request("tableData", pagination),
  };
  return tableProps;
});
const editFormProps = computed<EditFormProps>(() => {
  const formItems: FormItemProps[] = [
    {
      prop: "type",
      label: "类型",
      required: true,
      disabled: true,
    },

    {
      prop: "status",
      label: "状态",
      required: true,
      as: "switch",
      options: {
        activeValue: 1,
        inactiveValue: 0,
      },
    },

    {
      prop: "imageFindings",
      label: "影像所见",
      required: true,
      options: {
        rows: 6,
        type: "textarea",
      },
    },
    {
      prop: "diagnosticOpinion",
      label: "诊断意见",
      required: true,
      options: {
        rows: 4,
        type: "textarea",
      },
    },
  ];

  const editProps: EditFormProps = {
    model: editingObj.value,
    items: formItems,
    columns: 1,
    size: "middle",
    loading: loadingMap.save,
    title: "术语详情",
    onClose: () => {
      editingObj.value = null;
    },
    onCancel: () => {
      editingObj.value = null;
    },
    onValidate: (model: any) => {
      request("save", model);
    },
  };

  return editProps;
});

const onPageActions = (action: IAction, model?: any) => {
  switch (action.event) {
    case "add":
      break;
    case "edit":
      editingItem.value = Object.assign({ parentName: model.name }, model);
      editingModel.value = true;
      break;
    case "destroy":
      request("destroy", model ? model.id : "");
      break;
    case "entry": {
      initEntry(model ? model.id : "");
    }
  }
};
//初始话术语
const initEntry = (entryTypeId: string) => {
  editingObj.value = null;
  if (entryTypeId && entryTypeId.trim().length > 0) {
    request("entry", entryTypeId).then((res) => {
      if (res) {
        let entry = data.entry ?? {};
        //@ts-ignore
        if (entry && entry.id && entry.id.trim().length > 0) {
          editingObj.value = $api.pacs.entry.$$createEntity(entry);
          return;
        }
      }
    });
  }
};
watch(
  () => props.selectItem,
  (item) => {
    editingObj.value = null;
    if (item && item.id) {
      request("tableData");
    }
  },
  {
    immediate: true,
  }
);
</script>

<style lang="less" scoped>
.ignore-entry-body {
  width: 100%;
  height: 100%;
}
</style>
